<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1 style="float: left">统计分析<small>会员数量</small></h1>
        <table>
            <tr>
                <td style="width: 20%">

                </td>
                <td>

                    <div id="app1">
                        <select name="cars" id="startDate">
                        </select>
                        <small>-</small>
                        <select name="cars" id="endDate">
                        </select>
                        <input type="button" value="查询" v-on:click="fun1"/>
                    </div>

                </td>
        </table>
        </td>
        </tr>


        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>会员数量</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:500px;"></div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('chart1'));

    var dataAxis;
    axios.get("/report/getMemberReport.do").then((res) => {
        dataAxis = res.data.data.months;
        data = res.data.data.memberCount;
        data2 = res.data.data.memberCount;
        hs3 = document.getElementById("startDate");
        hs4 = document.getElementById("endDate");
        for (var i = 0; i < dataAxis.length; i++) {
            var btn1 = document.createElement("option");
            var btn2 = document.createElement("option");
            var t1 = document.createTextNode(dataAxis[i]);
            btn1.appendChild(t1);
            var t2 = document.createTextNode(dataAxis[i]);
            btn2.appendChild(t2);
            hs3.appendChild(btn1);
            hs4.appendChild(btn2);
        }
        var yMax = 500;

        var dataShadow = [];

        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }
        myChart1.setOption(
            {

                title: {
                    text: '会员数量'
                },
                legend: {
                    data: ['会员数量']
                },
                tooltip: {},
                xAxis: {


                    data: dataAxis,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#000000'
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                dataZoom: [
                    {}
                ],
                series: [

                    {
                        name: '会员数量',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                                )
                            }
                        },
                        data: data
                    }
                ]
            });

    });
    new Vue({
        el: "#app1",
        methods: {
            fun1: function () {
                dataAxis1 = new Array();
                data1 = new Array();
                hs1 = document.getElementById("startDate").value;
                hs2 = document.getElementById("endDate").value;
                if (hs1 > hs2) {
                    alert("开始日期需小于结束日期，谢谢");
                    return;
                }
                for (var i = 0; i < dataAxis.length; i++) {
                    if (dataAxis[i] >= hs1 && dataAxis[i] <= hs2) {
                        dataAxis1.push(dataAxis[i]);
                        data1.push(data2[i]);
                        // alert("ok");
                        // alert(dataAxis.length)
                    }
                }

                var yMax = 500;

                var dataShadow = [];

                for (var i = 0; i < data1.length; i++) {
                    dataShadow.push(yMax);
                }
                myChart1.setOption(
                    {

                        title: {
                            text: '会员数量'
                        },
                        legend: {
                            data: ['会员数量']
                        },
                        tooltip: {},
                        xAxis: {
                            data: dataAxis1,
                            axisLabel: {
                                inside: false,
                                textStyle: {
                                    color: '#000000'
                                }
                            },
                            axisTick: {
                                show: true
                            },
                            axisLine: {
                                show: false
                            },
                            z: 10
                        },
                        yAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        dataZoom: [
                            {}
                        ],
                        series: [

                            {
                                name: '会员数量',
                                type: 'line',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#83bff6'},
                                                {offset: 0.5, color: '#188df0'},
                                                {offset: 1, color: '#188df0'}
                                            ]
                                        )
                                    },
                                    emphasis: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#2378f7'},
                                                {offset: 0.7, color: '#2378f7'},
                                                {offset: 1, color: '#83bff6'}
                                            ]
                                        )
                                    }
                                },
                                data: data
                            }
                        ]
                    });

            }
        }
    })
</script>
</html>